<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>

<div class="layui-inline">
    <label class="layui-form-label">姓名：</label>
    <div class="layui-input-inline">
        <input type="text" name="schoolName" id="schoolName"   autocomplete="off" class="layui-input">
    </div>
    <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search"  		 id="selectName">查询</button>

    <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-add-circle-fine"  id="addStuBtn" lay-event="add">增加一条数据</button>
    <button type="button" class="layui-btn layui-btn-danger  layui-icon layui-icon-delete"  id="deleteStuBtn" lay-event="delete">批量删除</button>
</div>
<!-- 表格行内toolbar -->
<div style="display: none;" id="barDemo">
    <a class="layui-btn layui-btn-xs  layui-icon layui-icon-edit"
       lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger  layui-btn-xs layui-icon layui-icon-delete"
        lay-event="del">删除</a>
</div>
<table class="layui-hide" id="demo" lay-filter="demo"></table>

<!-- 弹出层div(新增和修改) -->
<div id="mydiv"  style="display: none">
    <form  class="layui-form" lay-filter="dataform" id="dataform" method="post">
        <div class="layui-form-item" >
            <div class="layui-input-inline">
                <input type="hidden" name="schId" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" >
            <label class="layui-form-label">学校名称：</label>
            <div class="layui-input-inline">
                <input type="text" name="schoolName" required lay-verify="required"
                       autocomplete="off" placeholder="学校名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学校人数:</label>
            <div class="layui-input-inline">
                <input type="number"  min="1" max="999999" name="number" required lay-verify="required"
                       autocomplete="off" placeholder="学校人数" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" >
            <label class="layui-form-label">地址：</label>
            <div class="layui-input-inline">
                <input type="text" name="address" required lay-verify="required"
                       autocomplete="off" placeholder="地址" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">大小:</label>
            <div class="layui-input-inline">
                <input type="number"  min="1" max="999999" name="size" required lay-verify="required"
                       autocomplete="off" placeholder="大小" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" id="butAdd" class="layui-btn">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script>
    layui.use([ "element", "jquery", "layer", "form", "table" ], function(){
        var table = layui.table;
        var $ = layui.jquery;
        var element = layui.element;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var url;//装修改的form表单路径和新增的url
        var tanIndex;//关闭弹出框的

        //展示已知数据
        var mytable= table.render({
            elem: '#demo'
            ,url:'getAllSchool'    //后端controller请求路径
            ,cols: [[ //标题栏
                {
                    type : 'checkbox',
                    fixed : 'left'  //启动复选框
                }
                ,{field: 'schId', title: '学校编号', width: 180}
                ,{field: 'schoolName', title: '学校名称', width: 180, sort: true}
                , {field: 'number', title: '学校人数', width: 120}
                , {field: 'address', title: '地址', minWidth: 150}
                , {field: 'size', title: '大小', minWidth: 160}
                ,{
                    fixed : 'right',
                    title : '操作',
                    toolbar : '#barDemo',
                    width : 150,
                    align : 'center'
                }
            ]]

            //,skin: 'line' //表格风格
            ,even: true
            ,page: true //是否显示分页
            ,limits: [5, 7, 10]
            ,limit: '5' //每页默认显示的数量
        });
        $("#selectName").click(function () {
            mytable.reload({
                page: {
                    curr: 1 //重新从第 1 页开始
                    , limit: 5
                }
                , method: 'GET'
                , url: 'getAllSchool'
                , where: {
                    schoolName: $("#schoolName").val() //参数 多个值,逗号隔开
                }
            });
        });
        $("#addStuBtn").click(function (){
            //新增按钮的点击事件,打开新增的form表单,默认是隐藏的
            tanIndex= layer.open({
                type:1,  //设置类型 默认为0 1 页面层 2 iframe层
                title:'新增学校信息',  //标题
                content:$("#mydiv"), //内容  type=0 的内容
                skin:'layui-layer-molv',//skin - 样式类名
                area:['400px'],  //area - 宽高
                offset:[50,400],//offset - 坐标 默认：垂直水平居中
                btnAlign:'c',//按钮排列
                closeBtn:2,  //设置关闭按钮的样式 默认是1  0是没有 2
                anim: 4,//设置动画
                maxmin:true,//该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可
                success:function(index){
                    url="addSchool";
                    //清空表单数据
                    $("#dataform")[0].reset();
                }
            });
        });
        $("#butAdd").click(function (){
            //序列化表单数据
            var params=$("#dataform").serialize();
            $.ajax({
                type:"post",
                url:url,
                data:params,
                success:function(data){
                    //刷新数据表格
                    mytable.reload();
                    //关闭弹出层
                    layer.close(tanIndex);
                }
            });
        })

        //每行按钮监听 table中lay-filter="demo"的值,不是id
        table.on('tool(demo)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是  表头的 event 参数对应的值）
            if(layEvent =='edit'){
                //修改操作
                openUpdate(data);
            }else if(layEvent =='del'){
                //删除操作
                layer.confirm('真的删除行?', function(index){
                    $.get("deleteStudents","schId="+data.schId,function(back){
                        //刷新数据表格

                        mytable.reload();
                    });
                    layer.close(index);
                });
            }
        });
        //row传过来的这一行的数据
        function openUpdate(row){
            //打开修改的div对话框
            tanIndex= layer.open({
                type:1,  //设置类型 默认为0 1 页面层 2 iframe层
                title:'修改学校信息',  //标题
                content:$("#mydiv"), //内容  type=0 的内容
                skin:'layui-layer-molv',//skin - 样式类名
                area:['400px'],  //area - 宽高
                offset:[50,400],//offset - 坐标 默认：垂直水平居中
                btnAlign:'c',//按钮排列
                closeBtn:2,  //设置关闭按钮的样式 默认是1  0是没有 2
                anim: 4,//设置动画
                maxmin:true,//该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可
                success:function(index){
                    url="updateStudentJson";
                    //给表单赋值
                    form.val('dataform',row);
                }
            });
        }

        $("#deleteStuBtn").click(function (){
            alert(12);
            var checkStatus = table.checkStatus('demo'); //即为基础参数 id 对应的值
            console.log(checkStatus.data) //获取选中行的数据
            console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
            console.log(checkStatus.isAll) //表格是否全选
            var schId=""; //用于拼接id
            if(checkStatus.data.length>0){
                for(var i =0;i<checkStatus.data.length;i++){
                    if(i==0){
                        schId =  checkStatus.data[i].schId;
                    }else{
                        schId = checkStatus.data[i].schId+"," + schId;
                        alert(schId);
                    }
                }
                $.ajax({
                    type:"get",
                    url:'delSchools',
                    data:'schId='+schId,
                    success:function(data){
                        //刷新数据表格
                        mytable.reload();
                        //关闭弹出层
                        layer.close(tanIndex);
                        layer.msg("删除成功",{  icon: 6,
                            time: 1000});
                    }
                });
            }else{
                layer.msg("没有选择数据",{  icon: 2,
                    time: 1000});
            }
        });

    });
</script>
</body>
</html>
